<script setup lang="ts">
import { useRouter } from "vue-router";
import { ConsultGrade } from "@/enum";
import useConsultStore from "@/pinia/modules/consultStore.ts";
import type { Router } from "vue-router";


const router: Router = useRouter();
const consultStore = useConsultStore();

/*第二步：记录问诊的级别是普通问诊还是三甲问诊*/
const handleClick = (path: string, grade: ConsultGrade) => {
    /*
    * path:跳转的页面
    * grade:问诊的等级
    * */
    // 跳转到科室页面
    router.push(path);
    // 记录问诊的级别
    consultStore.setIllnessType(grade);
};
</script>

<template>
    <div class="consult">
        <nav-bar title="极速问诊" right-text="问诊记录" left-arrow left-text="返回" @click-left="$router.back()" @click-right="$router.push('/consultRecord')"></nav-bar>
        <div class="fast-logo">
            <img class="img" src="../../assets/images/consult-fast.png" alt="" />
            <p class="text"><span>20s</span> 快速匹配专业医生</p>
        </div>
        <div class="fast-type">
            <a class="item" @click="handleClick('/consult/department',ConsultGrade.advanced)">
                <svg-icon class="pic" svg-name="doctor"></svg-icon>
                <div class="info">
                    <p>三甲图文问诊</p>
                    <p>三甲主治及以上级别医生</p>
                </div>
                <van-icon name="arrow"></van-icon>
            </a>
            <a class="item" @click="handleClick('/consult/department',ConsultGrade.normal)">
                <svg-icon class="pic" svg-name="message"></svg-icon>
                <div class="info">
                    <p>普通图文问诊</p>
                    <p>二甲主治及以上级别医生</p>
                </div>
                <van-icon name="arrow"></van-icon>
            </a>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.consult {
    .fast-logo {
        padding: 30px 0;
        text-align: center;

        .img {
            width: 240px;
        }

        .text {
            font-size: 16px;
            margin-top: 10px;

            > span {
                color: var(--cp-primary);
            }
        }
    }

    .fast-type {
        padding: 15px;

        .item {
            display: flex;
            padding: 16px;
            border-radius: 4px;
            align-items: center;
            margin-bottom: 16px;
            border: 0.5px solid var(--cp-line);
        }

        .pic {
            width: 40px;
            height: 40px;
        }

        .info {
            margin-left: 12px;
            flex: 1;

            > p:first-child {
                font-size: 16px;
                color: var(--cp-text1);
                margin-bottom: 4px;
            }

            > p:last-child {
                font-size: 13px;
                color: var(--cp-tag);
            }
        }

        .van-icon {
            color: var(--cp-tip);
        }
    }
}
</style>
